<template>
  <div class="index-wrap">
    <div class="index-left">
        <div class="index-left-block">
            <template>
                <h3>{{ baQuan.title }}</h3>
            
                <ul>
                    <li v-for="(item,index) in baQuan.list">
                        <a :href="item.url">
                            <span class="list-index" v-if="item.hot">{{ index +1 }}</span>
                            <span v-else>{{ index +1 }}</span>
                            {{ item.name }}
                        </a>
                    </li>
                </ul>
            </template>
        </div>
        <div class="index-left-block">
            <h3>{{ juChang.title }}</h3>
            <ul>
                <li v-for="(item,index) in juChang.list">
                    <a href="item.url">
                        <span class="list-index">{{ index +1 }}</span> {{ item.name }}
                    </a>
                 </li>
            </ul>
        </div>
    </div>
    <div class="index-right">
        <slide-show :slides="slides" :inv="invTime" @onchange="changeInSlide"></slide-show>
        <div class="index-right-list">
            <div class="index-right-box" v-for="item in boxInner">
                <img :src='item.src' alt="pic">
                <div class="index-right-box-inner">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.descripition }}</p>
                    <a :href="item.href">立即查看</a>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import slideShow from '../components/slideShow'
export default {
//   name: 'index',
  components: {
    slideShow
  },
  created: function(){
      this.$http.get('/api/getList')
      .then((res) =>{
        this.juChang.list = res.data.data
      },function(err){
        console.log(err)
      })
  },
  methods: {
      changeInSlide (arg){
        //   console.log('changed'+arg)
      }
  },
  data () {
    return {
      isActive: false,
      invTime: 2000,
      slides: [
          {
            src: require('../assets/slideShow/0.jpg'),
            title: 'pipi美和pop子',
            href: 'detail/bd'
          },
          {
            src: require('../assets/slideShow/1.jpg'),
            title: '空白',
            href: 'detail/bd'
          },
          {
            src: require('../assets/slideShow/2.jpg'),
            title: '*姆',
            href: '/detail/bd'
          },
          {
            src: require('../assets/slideShow/3.jpg'),
            title: '石头门',
            href: '/detail/bd'
          }
        ],
       
        baQuan: {
            title: '一月霸权',
            list: [
            {
                name: 'pop子和pipi美',
                url: '',
                hot: true
            },
            {
                name: '龙王的工作',
                url: '',
                hot: true
            },
            {
                name: 'DARLING in the FRANKXX',
                url: '',
                hot: true
            },
            {
                name: 'OVERLOAD',
                url: ''
            },
            {
                name: 'OVERLOAD ②',
                url: ''
            },
            {
                name: '西片太太',
                url: ''
            },
            {
                name: '紫罗兰的永恒花园',
                url: ''
            }
            ]
        },
       
       juChang: {
            title: '崩坏の剧场',
            list: []
       },

       boxInner: [
           {
               title: '动漫BD',
               src: require('../assets/images/pic1.jpg'),
               descripition: '全宇宙的动漫BD收集',
               saleout: false,
               href: 'detail/bd'
           },
           {
               title: '动漫图片',
               src: require('../assets/images/pic2.jpg'),
               descripition: '全宇宙的图片收集',
               saleout: false,
               href: 'detail/bd'
           },
           {
               title: '模型',
               src: require('../assets/images/pic3.jpg'),
               descripition: '全宇宙的模型收集',
               saleout: false,
               href: 'detail/bd'
           },
           {
               title: '玩梗百科',
               src: require('../assets/images/pic1.jpg'),
               descripition: '梗百科',
               saleout: false,
               href: 'detail/bd'
           },
           {
               title: '动漫百科',
               src: require('../assets/images/pic2.jpg'),
               descripition: '梗百科',
               saleout: false,
               href: 'detail/bd'
           },
           {
               title: 'pop子和pipi美',
               src: require('../assets/images/pic3.jpg'),
               descripition: 'pop子和pipi美的日常生气',
               saleout: false,
               href: 'detail/bd'
           }
       ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a,a:link{
    color: #333;
    text-decoration: none;
}

a:hover{
    color: #4fc08d;
}

.list-index{
    display: inline-block;
    color:#fff;
    background-color: #4fc08d;
    width: 16px;
    text-align: center;
    font-weight: bolder;
    border-radius: 4px;
    font-size: 13px;
    text-indent: -1px;
}

.index-wrap{
    color: #333;
    width: 100%;
}

.index-left{
    width: 220px;
    float: left;
}

.index-left-block{
    width: 200px;
    background-color: #fff;
    margin: 5px 10px;
    border-radius: 10px;
}

.index-left-block:nth-of-type(2){
    height: 600px;
}

.index-left-block h3{
    background: #4fc08d;
    color: #fff;
    padding: 10px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
}

.index-left-block ul {
  padding: 10px 15px;
}

.index-left-block li {
  padding: 5px;
}

.index-right{
    overflow: hidden;
}

.index-right-box{
    float: left;
    width: 300px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.index-right-box img{
    /* float: left; */
    vertical-align: top;
    width: 90px;
    height: 130px;
    padding-left: 0;
}

.index-right-box-inner{
    display: inline-block;
    /* padding-left: 120px; */
    min-height: 125px; 
}

.index-right-box-inner a{
    background-color: #4fc08d;
    color: #fff;
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 50px 0 0 0;
}
</style>
